<template>
  <div class="app-container">
    <div class="overview-layout">
      <div class="left-section">
        <!-- 本周考勤记录 -->
        <el-card class="box-card attendance-card">
          <div slot="header" class="clearfix">
            <span class="card-title">本周考勤记录</span>
          </div>
          <div class="attendance-info">
            <el-table :data="attendanceweek" border style="width: 100%">
              <el-table-column prop="date" label="日期" align="center">
                <template slot-scope="scope">
                  {{ parseTime(scope.row.date,'{y}-{m}-{d}') }}
                </template>
              </el-table-column>
              <el-table-column prop="weekday" label="星期" align="center">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.ya_weekday" :value="scope.row.weekday"/>
                </template>
              </el-table-column>
              <el-table-column label="早上考勤" align="center">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.ya_attendance_status" :value="scope.row.early"/>
              </template>
            </el-table-column>
              <el-table-column label="中午考勤" align="center">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.ya_attendance_status" :value="scope.row.noon"/>
                </template>
              </el-table-column>
              <el-table-column label="晚上考勤" align="center">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.ya_attendance_status" :value="scope.row.night"/>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>

        <!-- 面试题掌握情况 -->
        <el-card class="box-card interview-card">
          <div slot="header" class="clearfix">
            <span class="card-title">面试题掌握情况</span>
          </div>
          <el-table :data="interviewData" border style="width: 100%">
            <el-table-column prop="teacherName" label="抽问人" align="center" />
            <el-table-column prop="studentName" label="被抽问人" align="center" />
            <el-table-column prop="question" label="问题" align="center" />
            <el-table-column prop="score" label="得分" align="center" />
          </el-table>
        </el-card>
      </div>

      <div class="right-section">
        <!-- 今日课表 -->
        <el-card class="box-card schedule-card">
          <div slot="header" class="clearfix">
            <span class="card-title">今日考勤班级汇总</span>
          </div>
          <div class="schedule-info">
            <el-table :data="attendanceData" border style="width: 100%">
              <el-table-column prop="className" label="班级" align="center" />
              <el-table-column prop="weekday" label="星期" align="center">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.ya_weekday" :value="scope.row.weekday"/>
                </template>
              </el-table-column>
              <el-table-column label="早上考勤(出席/迟到/请假)" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.earlyPresent || 0 }}</span>/
                  <el-tooltip placement="top" effect="light">
                    <div slot="content">
                      <div>迟到人员：</div>
                      <div v-for="(name, index) in scope.row.earlyLateNames" :key="index">
                        {{ name }}
                      </div>
                    </div>
                    <span class="attendance-number">{{ scope.row.earlyLate || 0 }}</span>
                  </el-tooltip>/
                  <el-tooltip placement="top" effect="light">
                    <div slot="content">
                      <div>请假人员：</div>
                      <div v-for="(name, index) in scope.row.earlyLeaveNames" :key="index">
                        {{ name }}
                      </div>
                    </div>
                    <span class="attendance-number">{{ scope.row.earlyLeave || 0 }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="中午考勤(出席/迟到/请假)" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.noonPresent || 0 }}</span>/
                  <el-tooltip placement="top" effect="light">
                    <div slot="content">
                      <div>迟到人员：</div>
                      <div v-for="(name, index) in scope.row.noonLateNames" :key="index">
                        {{ name }}
                      </div>
                    </div>
                    <span class="attendance-number">{{ scope.row.noonLate || 0 }}</span>
                  </el-tooltip>/
                  <el-tooltip placement="top" effect="light">
                    <div slot="content">
                      <div>请假人员：</div>
                      <div v-for="(name, index) in scope.row.noonLeaveNames" :key="index">
                        {{ name }}
                      </div>
                    </div>
                    <span class="attendance-number">{{ scope.row.noonLeave || 0 }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="晚上考勤(出席/迟到/请假)" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.nightPresent || 0 }}</span>/
                  <el-tooltip placement="top" effect="light">
                    <div slot="content">
                      <div>迟到人员：</div>
                      <div v-for="(name, index) in scope.row.nightLateNames" :key="index">
                        {{ name }}
                      </div>
                    </div>
                    <span class="attendance-number">{{ scope.row.nightLate || 0 }}</span>
                  </el-tooltip>/
                  <el-tooltip placement="top" effect="light">
                    <div slot="content">
                      <div>请假人员：</div>
                      <div v-for="(name, index) in scope.row.nightLeaveNames" :key="index">
                        {{ name }}
                      </div>
                    </div>
                    <span class="attendance-number">{{ scope.row.nightLeave || 0 }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>

        <!-- 作业进度 -->
        <el-card class="box-card homework-card">
          <div slot="header" class="clearfix">
            <span class="card-title">昨日班级任务汇总</span>
          </div>
          <div class="homework-progress">
            <div class="progress-item">
              <el-table :data="yesterdayTaskData" border style="width: 100%">
                <el-table-column prop="className" label="班级" align="center" />
                <el-table-column prop="studentName" label="用户名" align="center" />
                <el-table-column prop="date" label="日期" align="center">
                </el-table-column>
                <el-table-column prop="status" label="任务状态" align="center">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.ya_task_status" :value="scope.row.status"/>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>

        <!-- 本周趋势 -->
        <el-card class="box-card trend-card">
          <div slot="header" class="clearfix">
            <span class="card-title">本周每日任务汇总</span>
          </div>
          <div class="trend-info">
            <div class="trend-item">
              <el-table :data="weekTaskData" border style="width: 100%">
                <el-table-column prop="className" label="班级" align="center" />
                <el-table-column prop="courseContent" label="授课内容" align="center" />
                <el-table-column prop="date" label="任务时间" align="center">
                  <template slot-scope="scope">
                    {{ parseTime(scope.row.date, '{y}-{m}-{d}') }}
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="任务状态" align="center">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.ya_task_status" :value="scope.row.status"/>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getWeekAttendance,
  getInterviewStatus,
  getTodayAttendance,
  getYesterdayTasks,
  getWeekTasks
} from '@/api/teaching/overview'
import { parseTime } from '@/utils'
export default {
  dicts:['ya_task_status','ya_weekday','ya_attendance_status'],
  data() {
    return {
      yesterdayTaskData: [],
      weekTaskData: [],
      attendanceweek: [],
      attendanceData: [],
      interviewData: []
    }
  },
  created() {
    this.getWeekAttendanceData()
    this.getInterviewStatusData()
    this.getTodayAttendanceData()
    this.getYesterdayTasksData()
    this.getWeekTasksData()
  },
  methods: {
    // 获取本周考勤记录
    async getWeekAttendanceData() {
      try {
        const response = await getWeekAttendance()
        this.attendanceweek = response.data
      } catch (error) {
        console.error('获取本周考勤记录失败:', error)
      }
    },
    // 获取面试题掌握情况
    async getInterviewStatusData() {
      try {
        const response = await getInterviewStatus()
        this.interviewData = response.data
      } catch (error) {
        console.error('获取面试题掌握情况失败:', error)
      }
    },
    // 获取今日考勤班级汇总
    async getTodayAttendanceData() {
      try {
        const response = await getTodayAttendance()
        this.attendanceData = response.data
      } catch (error) {
        console.error('获取今日考勤班级汇总失败:', error)
      }
    },
    // 获取昨日班级任务汇总
    async getYesterdayTasksData() {
      try {
        console.log('开始获取昨日班级任务汇总数据')
        const response = await getYesterdayTasks()
        console.log('获取昨日班级任务汇总数据成功:', response)
        this.yesterdayTaskData = response.data
      } catch (error) {
        console.error('获取昨日班级任务汇总失败:', error)
      }
    },
    // 获取本周每日任务汇总
    async getWeekTasksData() {
      try {
        const response = await getWeekTasks()
        this.weekTaskData = response.data
      } catch (error) {
        console.error('获取本周每日任务汇总失败:', error)
      }
    }
  }
}
</script>


<style scoped>
.app-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.overview-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.box-card {
  margin-bottom: 20px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #1f2d3d;
}

.date-info {
  display: flex;
  gap: 30px;
  padding: 15px;
}

.date-info span {
  font-size: 14px;
  color: #606266;
}

.date-info .date {
  color: #303133;
  font-weight: 500;
}

.task-count {
  float: right;
  color: #909399;
  font-size: 13px;
}

.schedule-item,
.progress-item {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #ebeef5;
}

.trend-info {
  padding: 15px;
}

.trend-item {
  display: flex;
  justify-content: space-around;
  color: #606266;
  font-size: 14px;
}

/* 表格样式 */
.el-table {
  margin: 10px 0;
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.el-table td {
  padding: 8px 0;
}

.el-card__header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}
</style>
